<template>
<div class="comment-page">
    <div class="total">
        {{ commentTotal }} 条评论
    </div>
    <div class="comments">
        <ul>
            <li v-for="item of commentList" :key="item.id">
                <div class="head flex item-center">
                    <img :src="item.userAvatar" height="50px" width="50px" alt="">
                    <div class="username">{{ item.user_name }}</div>
                    <div class="date small">{{ item.create_time }}</div>
                </div>
                <div class="content" v-html="item.content"></div>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    props: {
        commentTotal: {
            type: Number,
            default: 0
        },
        commentList: {
            type: Array,
            default: () => {
                return []
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.comment-page {
    padding: 20px;
    .total {
        padding: 20px 0;
    }
    .comments {
        li {
            padding: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            .head {
                img {
                    border-radius: 10px;
                }
                img, .username {
                    margin-right: 20px;
                }
                .date {

                }
            }
            .content {
                margin-top: 20px;
                padding-left: 60px;
            }
        }
        
    }
}
</style>